<template>
  <div id='main'>
    <!-- 用户顶部信息 -->
    <div class='user_top'>
        <div class='message'>
            <img src='/static/user/icon_er.png'>
            <img src='/static/user/user_message_icon.png'>
        </div>
        <div class='person_msg'>
            <div class='person_msgl'>
               <li><img src='/static/user/bg_head_new_light.png'></li>
               <div class='msgl_r'>
                 <p  v-for="list in userlists" :key="list.id" class='msgl_rn ff'>{{list.username}}
                     <img src='/static/user/vip_icon_gray.png'>
                 </p>
                 <p  v-for="list in userlists" :key="list.id" class='msgl_rt ff'>{{list.usernum}}
                     <img src='/static/user/icon_edit.png'>
                 </P>
              </div>
            </div>
            <div class='person_msgr'>
                <li>
                </li>
            </div>
        </div>
    </div> 
    <!-- 我的钱包 -->
    <div class='person_info'>
            <li class='one'>
                <div class='f1'>
                <img src='/static/user/icon_packet.png'>
                <br>
                <span>我的钱包</span>
                </div>
            </li>
             <li>
                <p class='dis_d' v-for="list in userlists" :key="list.id">{{list.nums}}</p>
                <span>我的关注</span>
            </li>
             <li>
                <p class='dis_d' v-for="list in userlists" :key="list.id">{{list.numd}}</p>
                <span>鲜豆</span>
            </li>
            <li>
                <p class='dis_d' v-for="list in userlists" :key="list.id">{{list.numc}}</p>
                <span>白条</span>
            </li>
    </div>
    <div class='myinfo'>
        <div class='pro_img'>
            <img src='/static/user/pro_img.png'>
        </div>
        <div class='pro_list'>
          <li>
            <img src='/static/user/1.png'>
            <p>我的关注</p>
          </li>
          <li>
             <img src='/static/user/2.png'>
            <p>我的评价</p>
          </li>
          <li>
             <img src='/static/user/3.png'>
             <p>我的地址</p>
         </li>  
         <li>
             <img src='/static/user/4.png'>
            <p>会员减运费</p>
         </li>
         </div>
        <div class='pro_help'>
          <li>
             <img src='/static/user/5.png'>
            <p>签到有惊喜</p>
          </li>
          <li>
             <img src='/static/user/6.png'>
            <p>退款/售后</p>
          </li>
          <li>
             <img src='/static/user/7.png'>
            <p>客服反馈</p>
          </li>
          <li>
             <img src='/static/user/8.png'>
            <p>帮助中心</p>
          </li>
        </div> 
        <div class='pro_about'>
          <li>
             <img src='/static/user/9.png'>
            <p>办公室超市</p>
          </li>
          <li>
             <img src='/static/user/10.png'>
            <p>配送员注册</p>
          </li>
          <li>
             <img src='/static/user/11.png'>
            <p>关注我们</p>
          </li>
        </div>  
    </div>
    <div class="foot">
        <p>退出账号</p>
    </div>
      <!-- 底部导航 -->
        <div id='bottom'>
            <bottom></bottom>
        </div>
  </div>

</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      userlists: []
    };
  },
  methods: {
    getUserList() {
      $.get(this.apiurl + "/user/list").done(result => {
        this.userlists = result.data;
      });
    }
  },
  created() {
    this.getUserList();
  }
};
</script>
<style scoped>
/* top */
#main {
  width: 100%;
}
.message {
  display: flex;
  justify-content: flex-end;
  width: 96%;
  margin: -0.5rem auto;
  padding-bottom: 0.9rem;
}
.message > img {
  width: 1.275rem;
  height: 1.275rem;
}
.message > img:nth-child(1) {
  margin-right: 1rem;
}
#main .user_top {
  background: url(/static/user/my_bgnew.png) center bottom no-repeat;
  background-size: cover;
  padding: 1.25rem 0;
}
.person_msg {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.person_msgl {
  width: 84%;
  display: flex;
  justify-content: space-around;
  margin-top: -1rem;
}
.msgl_r {
  width: 65%;
  padding-left: 0.8rem;
}
.person_msgl > li {
  width: 35%;
}
.person_msgl > li > img {
  width: 80%;
  margin-left: 1rem;
}
.person_msgr {
  width: 50%;
  position: relative;
}
.person_msgr > li {
  position: absolute;
  right: 0;
  bottom: -1.1rem;
  background-size: cover;
  animation: mymove 3s 0.01s ease-in-out infinite;
  animation-direction: alternate;
  width: 6.375rem;
  height: 4rem;
}
@keyframes mymove {
  from {
    background: url(/static/user/vip_centernew@2x.png) 0rem 0.4rem no-repeat;
    background-size: cover;
  }
  to {
    background: url(/static/user/vip_centernew@2x.png) 0rem 0.8rem no-repeat;
    background-size: cover;
  }
}
.person_msgr > li > img {
  width: 100%;
}
#main .ff {
  color: white;
  font-size: 0.96rem;
  line-height: 0.72rem;
  position: relative;
}
.msgl_rn {
  font-size: 0.88rem;
}
.msgl_rn > img {
  width: 1rem;
  height: 0.88rem;
}
.msgl_rt > img {
  width: 1rem;
  height: 1rem;
}
.msgl_rn > img,
.msgl_rt > img {
  position: absolute;
  bottom: 0;
  margin-left: 0.4rem;
}
/* 我的钱包 */
.person_info {
  width: 96%;
  display: flex;
  justify-content: space-between;
  margin: 1rem auto;
}
.person_info > li {
  text-align: center;
  margin: auto;
}
.f1 > img {
  width: 1.56rem;
  height: 1.56rem;
  padding: 0.1rem;
}
.person_info > li > span,
.f1 > span {
  display: block;
  font-size: 0.75rem;
  color: #323232;
}
.dis_d {
  font-size: 0.875rem;
  color: #323232;
  line-height: 0.4rem;
}
.one:after {
  background: #f4f4f4 url(/static/user/packet-right-border@2x.png) no-repeat
    center center;
  width: 0.1rem;
  content: "";
  height: 3rem;
  display: inline-block;
  position: absolute;
  right: -1rem;
  top: 0;
  background-color: #f4f4f4;
}
.one {
  position: relative;
}
/* info开始 */
.myinfo {
  width: 100%;
  background: #f4f4f4;
  padding-top: 0.5rem;
  padding-bottom: 0.1rem;
  font-size: 0.81rem;
  color: #323232;
  line-height: 0.88rem;
}
.pro_img,
.pro_help,
.pro_about {
  width: 100%;
  background: #fff;
}
.pro_img > img {
  width: 96%;
  margin: auto;
}
.pro_list,
.pro_help,
.pro_about {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: #fff;
}
.pro_list > li,
.pro_help > li,
.pro_about > li {
  width: 25%;
  text-align: center;
}
.pro_list > li > img,
.pro_help > li > img,
.pro_about > li > img {
  width: 56%;
}
.pro_about {
  justify-content: flex-start;
}
.pro_help {
  border-bottom: 0.1rem #f4f4f4 solid;
  border-top: 0.1rem #f4f4f4 solid;
}
.foot {
  background-color: #f4f4f4;
  padding: 0 0 4rem;
}
.foot > p {
  font-size: 1rem;
  color: #ff5757;
  text-align: center;
  line-height: 3rem;
  background-color: #fff;
}
/* 底部颜色设置 */
#main .a11{
    background-position: center -15.625rem;
    display: inline-block;
    height: 1.6rem;
    background-image: url(/static/nav4.png);
    background-repeat: no-repeat;
    background-size: 1.5rem 37.5rem;
    width: 100%;
}
#main .a15{
    background-position: center -6.25rem;
    display: inline-block;
    height: 1.6rem;
    background-image: url(/static/nav4.png);
    background-repeat: no-repeat;
    background-size: 1.5rem 37.5rem;
    width: 100%;
}
#main .at1{
  color: #555;
}
#main .at5{
  color:#39ac69
}
</style>